<template>
    <div>
       <el-table :data="data" border style="width: 100%; background: lightgray;" ref="multipleTable" > <!-- @selection-change="handleSelectionChange" -->
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column label="LOGO" width="150">
              <template scope="scope">
                <div class="meebidImageContainer">
                    <img :src="scope.row.imageUrls[0]" @click="handleDetail(scope.row, scope.$index)" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="no" label="编号" width="150" sortable>
            </el-table-column>
            <el-table-column prop="name" label="名称" sortable width="200">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="320">
            </el-table-column>
            <el-table-column label="预估价" width="120">
              <template scope="scope">
                <div v-if="scope.estMinPrice!=null||scope.estMaxPrice!=null">{{scope.estMinPrice}}~{{scope.estMaxPrice}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="reservePrice" label="底价" width="120">
            </el-table-column>
            <el-table-column prop="state" label="状态" :formatter="stateFormatter" width="120">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="20"
                    :total="total">
            </el-pagination>
        </div>
        
        <!-- <el-row :gutter="20">
            <el-col :span="12" :offset="6">
                <el-button class="marginTopSmall" type="primary" @click="handleStateChange(8)">发 布</el-button>
                <el-button class="marginTopSmall" type="danger" @click="handleStateChange(1)">拒 绝</el-button>
            </el-col>
        </el-row> -->
        <vodal :show="vodal_show" v-if="vodal_show" @hide="vodal_show=false" :closeButton="false" :width="800" :height="600">
          <slider v-bind="lot_images" />
        </vodal>
    </div>
</template>

<script>
import slider from "vue-image-scroll";
import { LotteryState, AuctionSceneState } from "../../config";

export default {
  props: {
    sceneId: 0,
    state: 0
  },
  components: {
    slider
  },
  data() {
    return {
      tableData: [],
      cur_page: 1,
      total: 0,
      select_lot_detail: 0,
      lot_images: [],
      vodal_show: false
    };
  },
  computed: {
    data() {
      console.log(this.sceneId);
      return this.tableData;
    }
  },
  mounted() {
    console.log(this.sceneId);
    if (this.sceneId == undefined || this.sceneId <= 0) {
      return;
    }
    this.getData();
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    getData() {
      let self = this;
      self.$http
        .get(
          "api/mgr/lotterys?sceneId=" +
          self.sceneId +
          "&state=" +
          (self.state == AuctionSceneState.Waiting ? LotteryState.Waiting : "") + // 等待状态
            "&offset=" +
            (self.cur_page - 1) * 20 +
            "&count=20"
        )
        .then(res => {
          if (res.data.code != 1) {
            return;
          }
          self.tableData = res.data.content.items;
          self.tableData.forEach((item, index) => {
            if (item.imageUrls != undefined && item.imageUrls != null) {
              item.imageUrls = item.imageUrls.split(";");
            } else {
              item.imageUrls = [];
            }
          });
          self.total = res.data.content.total;
        });
    },
    handleStateChange(state) {
      let self = this;
      // TODO:
      self.$http
        .post(
          "api/mgr/lot/audit",
          JSON.stringify({ sceneId: self.sceneId, state: state, oldState: 2 })
        )
        .then(res => {
          if (res.data.code != 1) {
            self.$message.error(res.data.msg);
            return;
          }
        });
    },
    handleDetail(row, column) {
      console.log(row.imageUrls);
      this.lot_images = {
        styleObject: {
          width: "800",
          height: "600",
          backgroundColor: "transparent",
          borderRadius: "20px"
        },
        imgStyle: {
          borderRadius: "20px"
        },
        image: row.imageUrls,
        autoRoll: false
      };
      this.vodal_show = true;
    },
    stateFormatter(row, column) {
      switch (row.state) {
        case LotteryState.Basic:
          return "新创建";
        case LotteryState.Waiting:
          return "等待审核";
        case LotteryState.Offline:
          return "下架中";
        case LotteryState.Online:
          return "上架中";
        case LotteryState.Forbidden:
          return "拉黑中";
      }
    }
  }
};
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
